<template>
  <div class=''>
    <!-- 由于它的根元素是el-form-item，则在使用这个组件时，要用el-form包起来 -->
    <el-form-item label="频道">
    <!-- clearable： 表示可清空的单选 -->
        <el-select @change="hSelectChange" v-model="channelId" clearable placeholder="请选择频道">
        <el-option
        v-for="channel in channels"
        :key="channel.id"
        :label="channel.name"
        :value="channel.id"></el-option>
        </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { getArticleChannels } from '@/api/article'
export default {
  name: 'MyChannels',
  props: { },
  data () {
    return {
      channelId: '', // 当前选中频道
      channels: [] // 频道列表
    }
  },
  computed: { },
  created () {
    this.loadChannels()
  },
  methods: {
    async loadChannels () {
      const result = await getArticleChannels()
      console.log('loadChannels', result)
      this.channels = result.data.data.channels
    },
    hSelectChange (val) {
      console.log('hSelectChange', val)
      // 抛出事件给父组件
      // this.$emit(事件名，参数)
      this.$emit('abc', val)
    }
  }
}
</script>
